<%@ page language="java" import="com.skyline.user.model.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<title>邀请主页</title>
<style type="text/css">
#content {
	width: 640px;
	height: 400px;
	visibility: hidden;
}

ul.none {
	list-style-type: none
}

.mouseOut {
	background: #708090;
	color: #fffafa;
}

.mouseOver {
	background: #fffafa;
	color: #000000;
}
</style>

</head>



<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/calendar.js">
</script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/invite.js">
</script>
<script charset="utf-8" src="/skyline/plugin/kindeditor/kindeditor.js">
</script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.js">
</script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.autocomplete.js">
</script>

<link href="${pageContext.request.contextPath}/css/jquery.autocomplete.css" rel="stylesheet"
	type="text/css" />
<link href="${pageContext.request.contextPath}/css/base.css"
	rel="stylesheet" type="text/css" />

<body>
	<%@ include file="/views/include/statusbar.jsp"%>

	<form id="inviteForm"
		action="<%=request.getContextPath()%>/spot/invite.html" method="post" autocomplete="off">
		<table width="100%" height="100%">
			<tr height="100%">
				<td width="55%"><br> <br> 地点： <input type="text"
					id="destination" name="destination" value="杭州"> <br> <br>
					<p>
						时间: <input type="text" id="appointmentTime" name="appointmentTime"
							onfocus="SelectDate(this)">
					<p>
					<form>
						搜索粉丝： <br> <input type="text" id="namequery" name="query">
						<input type="reset" value="清除">

					</form>

					<div>
						<table border="1">
							<tr height="10%" align="center">
								<td width="50%">粉丝列表</td>
								<td width="50%">邀请的粉丝列表</td>
							</tr>


							<tr height="90%">
								<td width="50%">
									<!-- 显示好友列表 -->
									<div id="fanListDiv"
										style="overflow-x: hidden; overflow-y: scroll; width: 100%; height: 350px;">
										<c:forEach var="fanList" items="${fanList}">
											<table id="fanListTable">
												<ul class="none">
													<li>
													<tr>
														<div>
															<td>
																<div>
																	<img height="60px" width="60px"
																		onclick="onFanItemSeleted_add('${fanList.fanId}','${fanList.fanPortrait}','${fanList.fanNickname}');"
																		title="单击邀请 ${fanList.fanNickname}"
																		src="${pageContext.request.contextPath}/comment/imagepath/${fanList.fanPortrait}.jpg" />
																</div>
															</td>
															<td>
																<div>
																	<a title="查看 ${fanList.fanNickname} 的主页"
																		href="<%=request.getContextPath()%>/wo/${fanList.fanId}.html">${fanList.fanNickname}</a>
																	<p>
																	<div id="fanInvitingDiv${fanList.fanId}">

																		<img
																			src="${pageContext.request.contextPath}/comment/imagepath/add.png">
																		<a href="#"
																			onclick="onFanItemSeleted_add('${fanList.fanId}','${fanList.fanPortrait}','${fanList.fanNickname}');">邀请</a>
																	</div>

																	<!-- 
																<img
																	src="${pageContext.request.contextPath}/comment/imagepath/symbol-remove.png">
																<a href="#"
																	onclick="cancleListenFriends('${fanList.fanNickname}')">取消</a>
																	
																	-->
																</div>
															</td>
														</div>
													</tr>
													</li>
												</ul>
											</table>
										</c:forEach>
									</div>
								</td>



								<!-- 显示选定的好友列表 -->
								<td width="50%">

									<div
										style="overflow-x: hidden; overflow-y: scroll; width: 100%; height: 350px;">

										<table>
											<div id="fanListInvitedDiv"></div>
										</table>



									</div>
								</td>
							</tr>
						</table>
					</div>
				</td>


				<td width="45%"><br> <br> <br> 内容： <br>
					<div>
						<textarea id="inviteContent" name="inviteContent" rows="15"
							cols="60"></textarea>
					</div> <br> <br> 这是地图啦 <br>
					<div>
						<textarea rows="15" cols="60" disabled="disabled"></textarea>
					</div>
				</td>
			</tr>

			<tr>
				<td align="center"><input class="btn_ok" type="button"
					value="提交" onclick="javascript:inviteFormSub()"> <input
					class="btn_cancel" type="button" value="取消" onclick="">
				</td>
			</tr>
		</table>
	</form>



	<input type="hidden" name="fanIdList" id="fanIdList">
	<input type="hidden" name="fanNicknameList" id="fanNicknameList">
	<input type="hidden" name="fanPortraitList" id="fanPortraitList">



	<!-- 文本编辑框 -->
	<script type="text/javascript">
	window.load="createSelectHourMinu();";
	
KE.show( {
	id : 'inviteContent',
	resizeMode : 1,
	allowPreviewEmoticons : true,
	allowUpload : true,
	items : [ 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
			'italic', 'underline', 'removeformat', '|', 'justifyleft',
			'justifycenter', 'justifyright', 'insertorderedlist',
			'insertunorderedlist', '|', 'emoticons', 'image', 'link' ],
	afterCreate : function(id) {
		KE.event.ctrl(document, 13, function() {
			KE.sync(id);
			addArticleSubmit();
		});
		KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
			KE.sync(id);
			addArticleSubmit();
		});
	}
});


	//automatch
	var onAutoCompleteSelect=function(value,data){
		var datas = data.split(",");//fanId,fanNickname,fanPortait
		var fanId = datas[0];
		var fanNickname = datas[1];
		var fanPortrait = datas[2];
		onFanItemSeleted_add(fanId,fanPortrait,fanNickname); //这是invite.js里的函数
	};
	
	var options={
			serviceUrl:'<%=request.getContextPath() %>/spot/invite/getSuggestion.html',
			minChars:1, 
		    maxHeight:400,
		    width:154,
		    zIndex: 9999,
			onSelect: onAutoCompleteSelect,
			noCache:true
		};
		//jquery.autocomplete与jquery-ui-1.8.16.custom.min.js中的autocomplete有冲突
		//所以将jquery.autocomplete中重新命名为autocomplete2
		$("#namequery").autocomplete2(options);


</script>

</body>
</html>